<!DOCTYPE HTML>
<html>

<head>
  <title>远程开关</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link rel="icon" href="data:,">
  <link rel="stylesheet" type="text/css" href="./index.css">
</head>

<body>
  <div class="topnav">
    <h1>远程开关</h1>
  </div>
  <div class="content">
    <div class="card">
      <h2>数字量开关</h2>
      <p>
      <div class="digital-card">
        <button id="d1" class="button button_small button_low">D1</button>
        <button id="d2" class="button button_small button_low">D2</button>
        <button id="d3" class="button button_small button_low">D3</button>
        <button id="d4" class="button button_small button_low">D4</button>
        <button id="d5" class="button button_small button_low">D5</button>
        <button id="d6" class="button button_small button_low">D6</button>
      </div>
      </p>
      <h2>模拟量开关</h2>
      <p>
      <div class="pwm-card">
        <button id="d7-min" class="button button_small button_low">D7</button>
        <input type="range" id="d7" min="0" max="255" value="0" step="15" class="slide">
        <button id="d7-max" class="button button_small">D7</button>
      </div>
      <div class="pwm-card">
        <button id="d8-min" class="button button_small button_low">D8</button>
        <input type="range" id="d8" min="0" max="255" value="0" step="15" class="slide">
        <button id="d8-max" class="button button_small">D8</button>
      </div>
      </p>
    </div>
    <div class="card">
      <h2>连接状态</h2>
      <p class="state"><span id="ws_status">%STATE%</span></p>
    </div>
  </div>
  <script src="./index.js"></script>
</body>

</html>